<template>
	<view class="chat">
		<view class="prompt">
			<u-notice-bar text="官方提醒：请勿轻信不明跳转链接、二维码支付及其他联系方式，如脱离会计工作小助手平台交易，支付打款。资金安全、纠纷处理、完善交付将均不受保障！"></u-notice-bar>
		</view>

		<scroll-view scroll-y="true" class="chat-list"
			:style="{ height: upShow ? 'calc(100vh - 380rpx)' : 'calc(100vh - 200rpx)' }" :scroll-with-animation="true"
			:scroll-top="scrollTop">
			<view @click="upShow = false">
				<view class="history">
					<u-button v-show="curMessageList.length >= 30" type="primary" :plain="true" text="查看历史" shape="circle" @click="moreMessage"></u-button>
				</view>
				<chatList class="dialogue-box-content" :curMessageList="curMessageList" :conversationObj="conversationObj">
				</chatList>

			</view>
		</scroll-view>
		<view class="chat-input">
			<view class="input">
				<u--input v-model="messageText" placeholder="请输入内容" border="none" shape="circle" :customStyle="{
					width: messageText ? '500rpx' : '530rpx',
					height: '70rpx',
					background: '#F6F6F6',
					borderRadius: '168rpx',
					marginRight: '28rpx',
					paddingLeft: '35rpx'
				}" @focus="upShow = false" confirmType="发送" @confirm="sendMessage(1)"></u--input>
				<view :style="{ width: messageText ? '100rpx' : '0' }" class="but" @click="sendMessage(1)">
					发送
				</view>
				<u-icon name="plus-circle" :size="messageText ? '0' : '38'" @click="showUp"></u-icon>
			</view>
			<view v-show="upShow" class="up">
				<u-grid :border="false" col="5">
					<u-grid-item @click="chooseImgType">
						<u-icon name="photo-fill" :size="34"></u-icon>
						<text class="grid-text">图片</text>
					</u-grid-item>
					<u-grid-item v-if="userInfo && userInfo.is_server == 1" @click="shopShow = true">
						<u-icon name="bag-fill" :size="34"></u-icon>
						<text class="grid-text">商品</text>
					</u-grid-item>
					<u-grid-item v-if="userInfo && userInfo.is_server == 1" @click="orderShow = true">
						<u-icon name="file-text-fill" :size="34"></u-icon>
						<text class="grid-text">订单</text>
					</u-grid-item>
				</u-grid>
			</view>
		</view>

		<u-popup :show="shopShow" mode="bottom" @close="close" :closeable="true" @open="shopOpen">
			<scroll-view scroll-y="true" style="height: 800rpx;background-color: #F6F6F6;" @scrolltolower="shopOpen">
				<view class="shop-list">
					<view class="shop-title">
						发送商品
					</view>
					<view v-for="(item, index) in shopList" :key="index" class="shop-item">
						<image :src="item.pic" mode="aspectFill"></image>
						<view class="info">
							{{ item.name }}
							<view class="text">
								服务时间：{{ item.service_time }}
							</view>
						</view>
						<view class="money">
							<view>￥{{ item.price }}</view>
							<u-button type="primary" shape="circle" :plain="true" :hairline="true" text="发送" size="mini"
								:customStyle="{ width: '108rpx', height: '50rpx' }" @click="sendMessage('shop', item)"></u-button>
						</view>
					</view>
				</view>
			</scroll-view>
		</u-popup>

		<u-popup :show="orderShow" mode="bottom" @close="close" :closeable="true" @open="orderOpen">
			<scroll-view scroll-y="true" style="height: 800rpx;background-color: #F6F6F6;" @scrolltolower="orderOpen">
				<view class="shop-list">
					<view class="shop-title">
						发送订单
					</view>
					<view v-for="(item, index) in orderList" :key="index" class="shop-item">
						<image :src="item.shopinfo.pic" mode="aspectFill"></image>
						<view class="info">
							{{ item.shopinfo.name }}
							<view class="text">
								<template v-if="orderIndex != index">
									￥{{ item.money }}
								</template>
								<template v-else>
									<u-number-box v-model="item.money" min="0" button-size="26" step="1" decimal-length="2"></u-number-box>
								</template>
								<view class="xg" @click="xg(index)">
									{{ orderIndex == index ? '完成' : '修改' }}
								</view>
							</view>
						</view>
						<view class="money">
							<u-button type="primary" shape="circle" :plain="true" :hairline="true" text="发送" size="mini"
								:customStyle="{ width: '108rpx', height: '50rpx' }" @click="sendMessage('order', item)"></u-button>
						</view>
					</view>
				</view>
			</scroll-view>
		</u-popup>

		<!-- 授权上传图片的弹窗 -->
		<yk-authpup ref="authpup" type="top" @changeAuth="changeAuth" :permissionID="permissionID"></yk-authpup>

		<!-- 选择拍摄还是从相册中 -->
		<view v-if="showChooseImg">
			<u-action-sheet :actions="showChooseImgList" :show="showChooseImg" cancelText="取消" @close="showChooseImg = false"
				:closeOnClickAction="true" @select="selectClick"></u-action-sheet>
		</view>

	</view>
</template>

<script  type="text/javascript" src="plus-confusion://../enterpriseServer/chatRoom/index"></script>

<style lang="scss" scoped>
.chat-list {
	overflow-anchor: none;
}

.chat-input {
	bottom: 0;
	position: fixed;
	left: 0;
	background-color: #fff;
	width: 750rpx;

	.input {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		padding: 16rpx 30rpx 44rpx;
	}

	input {
		width: 470rpx;
		height: 70rpx;
		background: #F6F6F6;
		border-radius: 168rpx;
	}

	.but {
		width: 100rpx;
		height: 63rpx;
		line-height: 63rpx;
		color: #fff;
		text-align: center;
		border-radius: 8rpx;
		background-color: #0177FD;
	}

	.up {
		height: 180rpx;

		.grid-text {
			font-size: 22rpx;
			text-align: center;
		}
	}
}

.shop-list {
	.shop-title {
		text-align: center;
		padding-bottom: 21rpx;
		padding-top: 27rpx;
		font-size: 38rpx;
		font-weight: 500;
		color: #333333;
	}
}

.shop-item {
	display: flex;
	align-items: center;
	background: #FFFFFF;
	border-radius: 20rpx;
	width: 690rpx;
	height: 159rpx;
	margin: 13rpx auto;
	padding-left: 27rpx;

	image {
		width: 110rpx;
		height: 110rpx;
		border-radius: 10rpx;
		margin-right: 28rpx;
	}

	.info {
		width: 394rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #333333;

		.text {
			padding-top: 16rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
			display: flex;
			align-items: center;

			.xg {
				width: 67rpx;
				height: 34rpx;
				line-height: 34rpx;
				text-align: center;
				border-radius: 4rpx;
				margin-left: 25rpx;
				border: 1rpx solid #0177FD;
				font-size: 22rpx;
				color: #0177FD;
			}
		}
	}

	.money {
		text-align: center;
		z-index: 99999;

		view {
			font-size: 24rpx;
			color: #333333;
			padding-bottom: 20rpx;
			text-align: center;
		}
	}
}

.history {
	width: 140rpx;
	padding-top: 30rpx;
	margin: 0 auto;
}
</style>